<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align: left"></div>
  </div>
</template>
<script>
import E from "wangeditor";
// import { uploadUtil } from "@/libs/uploadUtil";
// import { getSignature, getAliOssParams } from "@/api/api";
export default {
  name: "Editor",
  props: {
    value: {
      type: String,
      default: "",
    },
    temp: {
      type: String,
      default: "",
    },
    isClear: {
      type: Boolean,
      default: false,
    },
    ossHostInfo: {
      type: Object,
      default: () => {},
    },
    height: {
      type: Number,
      default: 500,
    },
  },
  watch:{
    temp:function(newVal){
      this.value=newVal
      this.editor.txt.html(this.value);
    }
  },
  data() {
    return {
      editor: null,
      info_: null,
      uploadHost: "",
    };
  },
  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
  // props: ['catchData'], // 接收父组件的方法
  mounted() {
    this.seteditor(); 
  },
  methods: {
    seteditor() {
      const vm = this;
      // 配置
      vm.editor = new E(this.$refs.editorElem);
      // vm.editor.config.uploadImgServer = 'https://kxcg.oss-cn-shanghai.aliyuncs.com' // 图片上传地址
      // vm.editor.config.uploadVideoServer = 'https://kxcg.oss-cn-shanghai.aliyuncs.com' // 配置自定义视频上传地址
      // vm.editor.config.showLinkVideo = false
      // vm.editor.config.uploadVideoAccept = ['mp4','mp3','mov']
      // vm.editor.config.uploadImgShowBase64 = false
      // vm.editor.config.uploadImgMaxSize = 3 * 1024 * 1024  // 将图片大小限制为 2M
      // vm.editor.config.uploadFileName='file'// 后端接受上传文件的参数名
      // vm.editor.config.uploadImgMaxLength =1// 限制一次最多上传 1 张图片
      // vm.editor.config.uploadImgTimeout= 3 * 60 * 1000 // 设置超时时间
      // vm.editor.config.showLinkImg = false // 隐藏“网络图片”tab
      vm.editor.config.onchange = (html) => {
        // this.isChange = true
        vm.info_ = html; // 绑定当前逐渐地值
        vm.$emit("change", this.info_); // 将内容同步到父组件中
      };
      // 自定义上传图片
      // vm.editor.config.customUploadImg = async (files, insert) => {
      //     this.getSignature(files,insert)
      // }
      // vm.editor.config.customInsertVideo = function (videoUrl) {
      //     // videoUrl 是返回的视频地址

      //     // 往编辑器插入 html 内容
      //     vm.editor.cmd.do(
      //         'insertHTML',
      //         `<video src="${videoUrl}" poster="${videoUrl}?x-oss-process=video/snapshot,t_100,f_jpg,w_0,h_0" controls="controls" style="max-width:100%">
      //       </video>`
      //     )
      //     // 初始化视频
      //     new Player({
      //         id: 'mse',
      //         url: videoUrl
      //     });
      // }
      // 自定义上传视频
      // vm.editor.config.customUploadVideo = (resultFiles, insertVideoFn) => {
      //     console.log(resultFiles)
      //     this.getSignature(resultFiles,insertVideoFn)
      // }
      vm.editor.config.zIndex = 500;
      // 设置编辑区域高度为 500px
      vm.editor.config.height = vm.height;
      // 取消自动 focus
      // vm.editor.config.focus = false;
      vm.editor.config.placeholder = "请编辑模板";
      vm.editor.create(); // 创建富文本实例
      vm.editor.txt.html(this.value);
    },
    // 获取oss上传信息
    // getSignature(file, insert) {
    //   getSignature().then((res) => {
    //     let data = res.data.data;
    //     const that = this;
    //     if (res.data.code === 1) {
    //       this.uploadHost = "https://" + data.bucket + "." + data.endpoint; //拼接Host
    //       let aliOssParams = uploadUtil.aliOssParams(
    //         data.accessKeyId,
    //         data.accessKeySecret
    //       );
    //       const timeStamp = Date.now();
    //       const type = file[0].type.split("/")[1];
    //       // console.log("key::", key);
    //       this.uploadData = new FormData();
    //       this.uploadData.append("key", `${data.bucket}${timeStamp}.${type}`);
    //       this.uploadData.append("policy", aliOssParams.policy);
    //       this.uploadData.append("OSSAccessKeyId", data.accessKeyId);
    //       this.uploadData.append("success_action_status", "200");
    //       this.uploadData.append("signature", aliOssParams.signature);
    //       this.uploadData.append("x-oss-security-token", data.securityToken);
    //       this.uploadData.append("file", file[0]);
    //       console.log(file[0]);
    //       try {
    //         const config = { "Content-Type": "multipart/form-data" };
    //         getAliOssParams(that.uploadHost, this.uploadData, config)
    //           .then((res) => {
    //             console.log(
    //               `${data.domain}/${data.bucket}${timeStamp}.${type}`
    //             );
    //             insert(`${data.domain}/${data.bucket}${timeStamp}.${type}`);
    //           })
    //           .catch((err) => {});
    //       } catch (error) {
    //         console.log(error);
    //       }
    //     } else {
    //       this.$Message.error(res.data.message);
    //     }
    //   });
    // },
  },
};
</script>
<style lang="scss" scoped>
// #wangeditor {
//   ::v-deep.w-e-toolbar {
//     z-index: 100 !important;
//   }
//   ::v-deep.w-e-text-container {
//     z-index: 99 !important;
//   }
// }
</style>